<!DOCTYPE html>
<html lang="en">
   	<head>
		<meta charset="UTF-8">
		<title>待结佣</title>
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta name="keywords" content="这里写关键字">
		<meta name="description" content="这里写页面描述">
		<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 
		<meta name="format-detection" content="telephone=no,email=no" />
		<link href="fontAwesome/css/font-awesome.min.css" rel="stylesheet">
		<link href="css/common.css" rel="stylesheet">
		<link href="css/main.css" rel="stylesheet">
		<script type="text/javascript" src="js/jquery.min.js"></script>
	</head>
</head>
<body>
	<div class="container">
		<div class="my-information">
			<div class="col-sm-6">
				<div class="template-row-list">
					<label class="label-title">
						<div class="totalIcon">
							总
						</div>
					</label>
					<div class="row-content total-comm">5000.00<small>（万）</small></div>
				</div>
			</div>
			<div class="col-sm-6">
				<ul class="report-warp">
					<li class="active">
						<div class="template-row-list">
							<label class="label-title">
								<div class="waitIcon">
									待
								</div>
							</label>
							<div class="row-content wait-comm">5000.00<small>（万）</small></div>
						</div>
					</li>
					<li>
						<div class="template-row-list">
							<label class="label-title">
								<div class="alreadyIcon">
									已
								</div>
							</label>
							<div class="row-content already-comm">5000.00<small>（万）</small></div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="commission-state">
			<div class="col-sm-6">
				<div class="stateBtn active">
					待结佣
				</div>
			</div>
			<div class="col-sm-6">
				<div class="stateBtn">
					已结佣
				</div>
			</div>
		</div>
		<ul class="report-warp">
			<li class="active">
				<ul class="report-list-view commission-list-view">
					<li>
						<div class="report-info-cell">
							<div class="report-list-details">
								<div class="report-phone">小默</div>
								<div class="report-name">13898980909</div>
								<div class="report-state">2016-12-09  14:23</div>
							</div>
							<div class="template-list-right">
								<div class="title">东方雅苑</div>
								<div class="content">9000.00<small>元</small></div>
							</div>
						</div>
					</li>
					<li>
						<div class="report-info-cell">
							<div class="report-list-details">
								<div class="report-phone">小默</div>
								<div class="report-name">13898980909</div>
								<div class="report-state">2016-12-09  14:23</div>
							</div>
							<div class="template-list-right">
								<div class="title">东方雅苑</div>
								<div class="content">9000.00<small>元</small></div>
							</div>
						</div>
					</li>
				</ul>
			</li>
			<li>
				<ul class="report-list-view commission-list-view">
					<li>
						<div class="report-info-cell">
							<div class="report-list-details">
								<div class="report-phone">小默</div>
								<div class="report-name">13898980909</div>
								<div class="report-state">2016-12-09  14:23</div>
							</div>
							<div class="template-list-right">
								<div class="title">东方雅苑</div>
								<div class="content already">9000.00<small>元</small></div>
							</div>
						</div>
					</li>
					<li>
						<div class="report-info-cell">
							<div class="report-list-details">
								<div class="report-phone">小默</div>
								<div class="report-name">13898980909</div>
								<div class="report-state">2016-12-09  14:23</div>
							</div>
							<div class="template-list-right">
								<div class="title">东方雅苑</div>
								<div class="content already">9000.00<small>元</small></div>
							</div>
						</div>
					</li>
					<li>
						<div class="report-info-cell">
							<div class="report-list-details">
								<div class="report-phone">小默</div>
								<div class="report-name">13898980909</div>
								<div class="report-state">2016-12-09  14:23</div>
							</div>
							<div class="template-list-right">
								<div class="title">东方雅苑</div>
								<div class="content already">9000.00<small>元</small></div>
							</div>
						</div>
					</li>
					<li>
						<div class="report-info-cell">
							<div class="report-list-details">
								<div class="report-phone">小默</div>
								<div class="report-name">13898980909</div>
								<div class="report-state">2016-12-09  14:23</div>
							</div>
							<div class="template-list-right">
								<div class="title">东方雅苑</div>
								<div class="content already">9000.00<small>元</small></div>
							</div>
						</div>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</body>
<script type="text/javascript">
	$(function(){
		$(".stateBtn").click(function(){
			if( !$(this).hasClass("active")){
				$(this).addClass("active");
				$(this).parent().siblings().find(".stateBtn").removeClass("active");
				$(".report-warp>li").eq($(this).parent().index()).addClass("active").siblings().removeClass("active");
			}
		})
	})
</script>
</html>
